<template>
  <div class="departments">
    <el-card class="box-card" v-loading="loading">
      <div class="tab">
        <el-tabs v-model="activeName">
          <el-tab-pane label="组织结构" name="first"></el-tab-pane>
        </el-tabs>
      </div>
      <!-- 头部 -->
      <tree-tool
        :treeData="company"
        :isRoot="true"
        @addDept="doAdd"
      ></tree-tool>
      <!-- 分割线 -->
      <el-divider></el-divider>

      <!-- 树形结构 -->
      <el-tree
        :data="data"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        icon-class="el-icon-circle-plus-outline"
      >
        <tree-tool
          slot-scope="{ data }"
          :treeData="data"
          @delDept="getDeptList"
          @addDept="doAdd"
          @editDept="editDept"
        ></tree-tool>
      </el-tree>
    </el-card>

    <!-- @update:showDialog="showDialog = $event"  也可以在行内些这句话，这句话相当于.sync的写法 -->
    <!-- 要使用.sync的话，父传子的$emit里面的第一个参数（即是事件名），格式为update:通过props传过来的属性, -->
    <addDept
      ref="dept"
      :showDialog.sync="showDialog"
      :pid="currentId"
      @addDept="getDeptList"
    />
  </div>
</template>

<script>
import { getDepartments } from "@/api/departments";
import treeTool from "./components/tree-tool.vue";
import addDept from "./components/add-dept.vue";
import { transToTreeData } from "@/utils";
export default {
  components: {
    treeTool,
    addDept
  },
  data() {
    return {
      loading: false,
      activeName: "first",
      showDialog: false,
      currentId: "",
      company: {
        name: "江苏传智播客教育科技股份有限公司",
        manager: "负责人",
        id: "",
        isRoot: true
      },
      data: [
        {
          id: 1,
          name: "总裁办",
          manager: "suncai",
          children: [
            {
              id: 4,
              name: "教务办",
              manager: "张三"
            }
          ]
        },
        {
          id: 2,
          name: "市场部",
          manager: "李四"
        },
        {
          id: 3,
          name: "财务部",
          manager: "王五"
        }
      ]
    };
  },
  created() {
    this.getDeptList();
  },
  methods: {
    doAdd(id) {
      this.currentId = id;
      this.showDialog = true;
    },
    async getDeptList() {
      this.loading = true;
      let res = await getDepartments();

      this.company.name = res.data.companyName;
      let list = res.data.depts;
      this.data = transToTreeData(list, "");
      this.loading = false;
    },
    async editDept(id) {
      await this.$refs.dept.getNowDeptDetail(id);
      this.showDialog = true;
    }
  }
};
</script>

<style lang="scss">
.departments {
  position: relative;
  .box-card {
    margin: 20px 20px;
    padding: 80px 20px 20px 100px;
    .tab {
      position: absolute;
      padding: 0 20px;
      color: #5fadff;
      width: 96%;
      left: 20px;
      top: 20px;
      span {
        font-size: 16px;
      }
    }
    .el-progress-bar__outer {
      height: 4px !important;
    }
  }
}
</style>
